<template>
    <div class="detail">
      <p>{{item.classifyName}}</p>
     <img :src="'https://cdn.bestseller.com.cn'+imgurlurl" alt="qi">
     <p>price:￥{{price}}</p>
     <p class="cart" v-on:click="addtocart(item)">立即加入购物车<span>购物车内商品数量{{amount}}</span></p>  
     <router-link to='/cart' tag="p" class="cart2">查看购物车</router-link>
     <p class="cart2" v-on:click="$router.back()">BACK</p> 
     <img :src="'https://cdn.bestseller.com.cn'+item.pcUrl" alt="qi">  
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import {response} from '../ajaxservice'
export default {
  name: 'Home',
  props:['cartid','item'],
  data(){
  return{
    imgurl:'',
    price:null
  }
  },
  computed:{
    ...mapState(['cartlist','amount'])
  },
  methods:{
   ...mapMutations(['addtocart'])
  },
  created(){
    this.imgurlurl=this.item.miniprogramUrl||this.item.picurls[3]
    this.price=this.item.price||this.item.sortBy
    console.log(this.imgurlurl)
    this.item.count=1;
  }
  ,
  updated(){  
  }
}
</script>

<style lang='scss' scoped>
.detail{
  p{text-align:center;line-height: 100px;font-size: 20px}
  .cart{&:hoover{border:1px solid black} span{float:right;margin-right: 50px}}
  .cart,.cart2{background: #b0b0b0;line-height: 50px;width: 80%;margin-left: 10%}
  .cart2{margin-top: 70px;background: black;color: white;width: 40%;text-align: center;margin-left: 30%;margin-bottom: 40px}
  img{width: 100%}
}
</style>
